前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

通过前两部分的学习,相信大家已能够熟练运用 PWA 的相关技术来构建高可用的现代 Web 应用。但如果我们仔细分析实战篇示例中 sw.js 的实现,便会发现:

  • 在 install 和 activate 事件中,一般只对静态资源做预缓存处理,且实现逻辑在不同的应用中几乎没有差异。
  • 在 fetch 事件中,需要对不用类型请求执行不同的请求策略、缓存置换控制,如果要处理的请求类型过多,那么 fetch 事件的实现将变得极其臃肿且不易维护。

我们经常将预缓存处理、请求策略、缓存置换等逻辑进行进一步抽象,以解决此类问题。也正是这些原因,本部分我们将进一步学习由 Google 官方推出的 PWA 应用框架 Workbox,该框架以配置的形式将我们从繁琐且容易出错的底层 API 中解放出来,以便我们能够更容易且高效地完成 PWA 应用的构建。

在接下来的章节中,我们将详细介绍 Workbox 的使用,主要内容包括:

  • 基本配置:介绍缓存名称、调试开关、skipWaiting 开关等基本信息的配置。
  • 预缓存:介绍预缓存在 Workbox 中的使用。
  • 路由配置:介绍在 Workbox 中如何进行路由配置来动态地拦截并处理网络请求。
  • 请求 & 缓存置换策略:介绍请求策略、缓存置换机制在 Workbox 中的使用。
  • 导航预加载:介绍导航预加载在 Workbox 中的使用。
  • 可缓存对象:介绍 Workbox 确定请求响应是否进行缓存的策略及使用。
  • 缓存更新广播:介绍缓存更新后,Service Worker 通知页面进行一些处理的机制,及 Service Worker 与页面互相通讯的常用技术及适用场景。
  • 后台同步:介绍后台同步在 Workbox 中的实现及使用。
  • 插件:介绍 Workbox 的插件机制及如何自定义插件。
  • Workbox window:介绍 Workbox 在页面线程中的使用。
  • Workbox build:介绍如何使用 workbox-build 来生成 Service Worker脚本,或生成预缓存列表并将其附加到已有的 Service Worker 脚本中。

本部分完整代码仓库为: github.com/nanjingboy/…

注:本部分基于 workbox@4.3.1 进行讲解。

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏